<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        border: solid;
        padding: 5px;
        margin: 10px;
      }
      .progress .bar {
        height: 10px;
        width: 0%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <h1>HELLO Index</h1>

    <input type="file" id="uploadInput" />
    <button onclick="upload(document.getElementById('uploadInput'))">
      保存
    </button>
    <div class="progress">
      <div class="bar" id="progressBar"></div>
    </div>

    <script>
      class MyAxios {
        get() {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url);
            xhr.responseType = "json";
            xhr.onload = function () {
              if (xhr.status === 200) {
                resolve({
                  status: xhr.status,
                  statusText: xhr.statusText,
                  headers: xhr
                    .getAllResponseHeaders()
                    .split("\r\n")
                    .slice(0, -1)
                    .reduce((r, el) => {
                      const [k, v] = el.split(": ");
                      r[k] = v;
                      return r;
                    }, {}),
                  data: xhr.response,
                });
              }
              if (xhr.status > 300) {
                reject(xhr.response);
              }
            };

            xhr.send();
          });
        }
        headerToObject(header) {
          return header
            .split("\r\n")
            .slice(0, -1)
            .reduce((r, el) => {
              const [k, v] = el.split(": ");
              r[k] = v;
              return r;
            }, {});
        }
        post(url, data) {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.responseType = "json";

            xhr.onload = function () {
              if (xhr.status === 200) {
                resolve({
                  status: xhr.status,
                  statusText: xhr.statusText,
                  headers: headerToObject(xhr.getAllResponseHeaders()),
                  data: xhr.response,
                });
              }
              if (xhr.status > 300) {
                reject(xhr.response);
              }
            };

            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data));
          });
        }
        patch(url, data) {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("PATCH", url);
            xhr.responseType = "json";
            xhr.onload = function () {
              if (xhr.status === 200) {
                resolve({
                  status: xhr.status,
                  statusText: xhr.statusText,
                  headers: xhr
                    .getAllResponseHeaders()
                    .split("\r\n")
                    .slice(0, -1)
                    .reduce((r, el) => {
                      const [k, v] = el.split(": ");
                      r[k] = v;
                      return r;
                    }, {}),
                  data: xhr.response,
                });
              }
              if (xhr.status > 300) {
                reject(xhr.response);
              }
            };

            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data));
          });
        }
        delete(url) {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("DELETE", url);
            xhr.responseType = "json";
            xhr.onload = function () {
              if (xhr.status >= 200 && xhr.status < 300) {
                resolve({
                  status: xhr.status,
                  statusText: xhr.statusText,
                  headers: xhr
                    .getAllResponseHeaders()
                    .split("\r\n")
                    .slice(0, -1)
                    .reduce((r, el) => {
                      const [k, v] = el.split(": ");
                      r[k] = v;
                      return r;
                    }, {}),
                  data: xhr.response,
                });
              }
              if (xhr.status > 300) {
                reject(xhr.response);
              }
            };

            xhr.send();
          });
        }
      }

      const request = new MyAxios();

      request
        .delete(
          "http://127.0.0.1:8090/api/collections/todolist/records/0p2vd9s0mz6tbai"
        )
        .then((data) => {
          console.log(data);
        })
        .catch((e) => {
          console.log(e);
        });

        
      /* request
        .patch(
          "http://127.0.0.1:8090/api/collections/todolist/records/0p2vd9s0mz6tbai",
          {
            title: "hahah",
            status: 1,
          }
        )
        .then((data) => {
          console.log(data);
        })
        .catch((e) => {
          console.log(e);
        }); */

      /* request
        .post("http://127.0.0.1:8090/api/collections/todolist/records", {
          title: "lalala",
          status: 2,
        })
        .then((data) => {
          console.log(data);
        })
        .catch((e) => {
          console.log(e);
        }); */
      /*
      request
        .get("http://127.0.0.1:8090/api/collections/todolist/records")
        .then((data) => {
          console.log(data);
        })
        .catch((e) => {
          console.log(e);
        }); */
    </script>
  </body>
</html>
